<template>
  <div class="main"
       :style="mainStyle">
    <div class="login">
      <p class="title"
         v-if="loginTag">Login</p>
      <div v-else>
        <i class="el-icon-back"
           @click="skipToLogin"></i>
        <p class="title">Register</p>
      </div>
      <div class="account">
        <input type="text"
               placeholder="请输入用户名"
               v-model="name" />
      </div>
      <div class="password">
        <input type="password"
               placeholder="请输入密码"
               v-model="password">
      </div>
      <div v-if="loginTag">
        <p v-show="show"
           class="tips">账号或密码有误</p>
        <el-button class="button"
                   @click="login">登录</el-button>
        <p class="warning">还没有账户，点击这里开始<a @click="skipToReg">注册</a></p>
      </div>
      <el-button class="button"
                 @click="register"
                 v-else>注册</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RegLogin',
  data () {
    return {
      loginTag: true,
      show: false,
      name: '',
      password: '',
      mainStyle: {
        backgroundImage: 'url(' + require('../assets/background.jpg') + ')',
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100% 100%'
      }
    }
  },
  methods: {
    skipToReg () {
      this.loginTag = false;
      this.name = '';
      this.password = '';
    },
    skipToLogin () {
      this.loginTag = true;
      this.name = '';
      this.password = '';
    },
    register () {
      var self = this
      self.$ajax({
        method: 'POST',
        url: '/view/register/',
        dataType: 'json',
        data: {
          'name': self.name,
          'password': self.password
        }
      }).then(function (response) {
        if (response.data == 'True')
          self.$message({ message: '注册成功', type: 'success' });
        else self.$message.error('用户名已存在');
      }).catch(function (err) {
        console.log(err)
      })
    },
    login () {
      var self = this
      self.$ajax({
        method: 'POST',
        url: '/view/login/',
        dataType: 'json',
        data: {
          'name': self.name,
          'password': self.password
        }
      }).then(function (response) {
        if (response.data == 'True') {
          self.$message({ message: '登录成功', type: 'success' });
          sessionStorage.setItem('name', self.name)
          window.location.href = './home'
        }
        else self.$message.error('账号或密码有误');
      }).catch(function (err) {
        console.log(err)
      })
    }
  }
}
</script>

<style lang='stylus' scoped>
.main
  width 100%
  height 6.69rem
  padding-top 1.2rem
  .login
    position relative
    margin 0.2rem auto
    width 4.5rem
    height 4rem
    color white
    opacity 0.6
    font-size 0.32rem
    border-radius 0.3rem
    border 0.01rem solid white
    .el-icon-back
      position absolute
      left 0.2rem
      cursor pointer
    .el-icon-back:hover
      color #5eafec
    .title
      width 1.2rem
      margin 0.3rem auto
      font-size 0.3rem
    .account
      display flex
      width 3rem
      height 0.3rem
      margin 0.4rem auto
      input
        flex 1
        border-radius 0.1rem
        padding-left 0.1rem
        border none
    .password
      display flex
      width 3rem
      height 0.3rem
      margin 0.4rem auto
      input
        flex 1
        border-radius 0.1rem
        padding-left 0.1rem
        border none
    .tips
      color red
      font-size 0.18rem
    .warning
      font-size 0.14rem
      a
        cursor pointer
        color red
    .el-button
      display block
      width 3rem
      height 0.4rem
      margin 0.1rem auto
      border-radius 0.1rem
</style>